<template>
  <div id="app">
    <el-container>
      <!-- 顶部导航 -->
      <el-header>
        <navTob :ismon="LogUser" @getTreeData="dengloa"></navTob>
      </el-header>
      <!-- 顶部导航结束 -->

      <el-container>
        <!-- 测边导航 -->
        <el-aside width="200px">
          <left />
        </el-aside>
        <!-- 测边导航结束 -->
        <el-container>
          <!-- 内容部分 -->
          <el-main>
            <el-collapse-transition name="el-fade-in-linear">
              <div class="mo" v-show="denglu">
                <span
                  class="guan"
                  @click="guanb"
                  border="0"
                  style="cursor: pointer"
                  >+</span
                >
                <h1 border="0" style="cursor: default">登录</h1>
                <transition name="denglu" mode="out-in">
                  <ul v-if="!note">
                    <li>
                      <span>账号：</span>
                      <el-input
                        placeholder="手机号码"
                        v-model="User.zhangh"
                      ></el-input>
                    </li>
                    <li>
                      <span>密码：</span>
                      <el-input
                        placeholder="请输入密码"
                        v-model="User.mima"
                        show-password
                      ></el-input>
                    </li>
                  </ul>
                  <ul v-else>
                    <li>
                      <span>邮箱：</span>
                      <el-input
                        placeholder="163网易邮箱"
                        v-model="shoj.haoma"
                      ></el-input>
                    </li>
                    <li>
                      <span>密码：</span>
                      <el-input
                        placeholder="密码"
                        v-model="shoj.yanzma"
                      ></el-input>
                    </li>
                  </ul>
                </transition>
                <ul>
                  <li class="duanx" v-if="note">
                    <span border="0" style="cursor: pointer" @click="ISnote"
                      >账号登录</span
                    >
                    <!-- <span
                      border="0"
                      style="cursor: pointerdisplay: flex; cursor: pointer;  text-align: right;"
                      @click="YanZhen"
                      class="denglou"
                      >获取验证码
                   <span v-show="yanz != 0" class="yanzm"
                        >{{ yanz }}秒</span
                      > 
                   </span> -->
                  </li>
                  <li class="duanx" v-else>
                    <span border="0" style="cursor: pointer" @click="ISnote"
                      >邮箱登录</span
                    >
                  </li>
                </ul>

                <span
                  class="dengl"
                  @click="dengl"
                  border="0"
                  style="cursor: pointer"
                  >登录</span
                >

                <ul class="lof">
                  <li border="0" style="cursor: pointer">
                    <img src="../src/assets/qq.png" alt="" />
                  </li>
                  <li border="0" style="cursor: pointer">
                    <img src="../src/assets/wx.png" alt="" />
                  </li>
                  <li border="0" style="cursor: pointer">
                    <img src="../src/assets/wb.png" alt="" />
                  </li>
                  <li border="0" style="cursor: pointer">
                    <img src="../src/assets/wy.png" alt="" />
                  </li>
                </ul>

                <span class="tzi" border="0" style="cursor: pointer"
                  ><el-radio v-model="radio" label="1"
                    >同意《服务条款》《儿童政策》</el-radio
                  ></span
                >
              </div>
            </el-collapse-transition>
         
              <router-view></router-view>
          
          </el-main>
          <!-- 内容部分结束 -->
        </el-container>
        <!-- <el-aside width="400px" class="dniwd">Aside</el-aside> -->
      </el-container>
      <!-- 底部栏 -->
      <el-footer>
        <div class="bottomss">
            
          <bottoms @getTreeData="liebiao"></bottoms>
        </div>
      </el-footer>
      <!-- 底部栏 -->
    </el-container>
    <!-- 歌曲播放 -->
    <div class="xian"></div>
  </div>
</template>
<script>
import { Message } from "element-ui";
import navTob from "../src/components/navtob.vue";
import left from "../src/components/left.vue";
import bottoms from "../src/components/bottom.vue";
import API from "../src/http/API";
export default {
  components: {
    navTob,
    left,
    bottoms,
    Message,
  },
  data() {
    return {
      User: {
        zhangh: "18176957527",
        mima: "lufeng478095123",
      },
      shoj: {
        haoma: "",
        yanzma: "",
      },
      radio: false,
      denglu: false,
      leibiao: false,
      //短信登录
      note: false,
      yanz: 0,
      LogUser: [],
      //精品添加个性推荐
      recommendation: [],
      //自己喜欢的歌曲
      likelistDataid: [],
    };
  },
  mounted() {
    // if ((this.LogUser = JSON.parse(localStorage.getItem("User")))) {
    //   this.denglu = !true;
    //   this.$store.commit("dengl", true);
    //   this.$store.commit("istoken", this.LogUser.token);
    //   console.log(this.LogUser);
    // } else {
    //   // this.denglu = true;
    //   this.$store.commit("dengl", false);
    // }
    // this.$store.commit("dengl");
  },
  created() {
    // this.ONrecommendation();
    this.$store.commit("dengl");
  },
  methods: {
    //拿到自己喜欢的歌曲先

    mylinke() {
      let id = JSON.parse(localStorage.getItem("User"));
      // console.log(id.account.id);
      this.$post(API.LIKELIST, {
        id: id.account.id,
      })
        .then((e) => {
          // console.log(e);
          if (e.code == 200) {
            this.likelistDataid = e.ids;

            if (this.likelistDatai < 1000) {
              localStorage.setItem("likelistDataid", JSON.stringify(e.ids));
            } else {
              localStorage.setItem(
                "likelistDataid",
                JSON.stringify(this.likelistDataid.slice(0, 1000))
              );
            }
          }
          //   this.muinlikes();
        })
        .catch((err) => {
          // console.log(err);
        });
    },

    ISnote() {
      this.note = !this.note;
    },
    YanZhen() {
      if (this.shoj.haoma != "") {
        if (this.yanz != 0) {
          this.$message({
            message: "短信验证请等待" + this.yanz + "秒",
            type: "warning",
          });
          return;
        }
        this.yanz = 60;
        var timer = setInterval(() => {
          this.yanz = this.yanz - 1;
          // console.log(this.yanz);
          if (this.yanz == 0) {
            clearInterval(timer);
          }
        }, 1000);

        this.$post(API.CAPTCHA_SENT, {
          phone: this.shoj.haoma,
        })
          .then((result) => {
            console.log(result);
          })
          .catch((err) => {});
      } else {
        alert("请输入手机号码");
      }
    },
    dengl() {
      if (this.note) {
        if (this.shoj.haoma == "") {
          this.$message({
            message: "账号未填写",
            type: "warning",
          });
          return;
        }

        if (this.shoj.yanzma == "") {
          this.$message({
            message: "密码未填写",
            type: "warning",
          });
          return;
        }
        this.$post(API.LOGIN, {
          email: this.shoj.haoma,
          password: this.shoj.yanzma,
        }).then((res) => {
          if (res.code == "501") {
            this.$message({
              message: "请检查书写格式",
              type: "warning",
            });
          }
          if (res.message == "密码错误") {
            // console.log(res);
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
          if (res.code == "400") {
            this.$message({
              message: "填写格式错误",
              type: "warning",
            });
          }
          if (res.code == 200) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            localStorage.removeItem("previouslyDate");
            localStorage.removeItem("random");
            localStorage.removeItem("ZT");
            localStorage.removeItem("JT");
            localStorage.setItem("token", res.token);
            localStorage.setItem("User", JSON.stringify(res));

            this.$store.commit("dengl");
          }
          // console.log(res);

          // console.log(res);
        });
      } else {
        if (this.User.zhangh == "") {
          this.$message({
            message: "账号未填写",
            type: "warning",
          });
          return;
        }

        if (this.User.mima == "") {
          this.$message({
            message: "密码未填写",
            type: "warning",
          });
          return;
        }
        if (this.radio) {
          this.$post(API.LOGIN_CELLPHONE, {
            phone: this.User.zhangh,
            password: this.User.mima,
          }).then((res) => {
            if (res.message == "密码错误") {
              // console.log(res);
              this.$message({
                message: res.message,
                type: "warning",
              });
            }
            if (res.code == "400") {
              this.$message({
                message: "填写格式错误",
                type: "warning",
              });
            }
            if (res.code == 200) {
              this.$message({
                message: "登录成功",
                type: "success",
              });
              //登录成功
              // this.$get(API.RECOMMEND_RESOURCE).then((data) => {
              //   console.log(data);

              //   console.log("1");
              //   console.log("需要登录的");
              // });

              localStorage.setItem("User", JSON.stringify(res));
              this.denglu = !true;

              this.LogUser = JSON.parse(localStorage.getItem("User"));
              this.$store.commit("istoken", this.LogUser.token);
              this.$store.commit("dengl");
            }
          });
        } else {
          this.$message({
            message: "未勾选需知！",
            type: "warning",
          });
        }
      }
    },

    guanb() {
      this.denglu = !true;
    },
    dengloa(e) {
      switch (e) {
        case 0:
          this.denglu = true;
          break;
        case 1:
          day = "星期一";
          break;
        case 2:
          this.LogUser = [];
          this.denglu = !true;
          localStorage.removeItem("User");
          this.$store.commit("istoken", "");
          break;
      }
    },
    liebiao(e) {
      this.leibiao = e;
    },
    //精品推荐个性推荐
  },
};
</script>



<style lang="less">
// 音量控制

// .dniwd{
//   position: relative;
//   z-index: 999;
//   top: 0;
//   right: 0;
// }
.el-input__suffix-inner {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
}
.yanzm {
  margin-top: 10px;
}
.denglu-enter-active {
  animation: denglu 0.2s;
}
.denglu-leave-active {
  animation: denglu 0.2s reverse;
}
@keyframes denglu {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.duanx {
  // border: 1px solid #000;
  height: 55px;
  color: rgb(11, 126, 192);

  display: flex;
  justify-content: space-between;
  span {
    display: block;
    // text-align: center;
    // width: auto;
    height: 20px;
    width: 90px;
    // border: 1px solid #000;
  }
}
.tzi {
  //  word-break: break-all;
  display: block;
  margin-right: 20px;
  position: absolute;
  bottom: 5px;
  margin-left: 20px;
}
.lof {
  margin-right: 20px;
  margin-left: 20px;
  display: flex;
  justify-content: space-between;
  li {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 90%;
      height: 90%;
    }
    &:nth-child(4) {
      img {
        width: 80%;
        height: 90%;
      }
    }
  }
}
.mo {
  position: fixed;
  z-index: 999;
  height: 500px;
  width: 300px;
  border-radius: 5px;
  background-color: #ffffff;
  // border: 1px solid rgb(255, 255, 255);
  left: 50%;
  top: 50%;
  box-shadow: 5px 5px 15px rgba(87, 85, 85, 0.623);
  transform: translate(-50%, -50%);
  .dengl {
    display: block;
    // margin-top: 20px;
    //  width: 100%;
    margin-right: 20px;
    margin-left: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f35353;
    height: 40px;
    border-radius: 5px;
    color: rgb(255, 255, 255);
  }
  ul {
    &:nth-child(2) {
      display: flex;
    }

    margin-right: 20px;
    margin-left: 20px;
    // border: 1px solid #000;
    li {
      margin-top: 20px;
      span {
        margin-bottom: 10px;
        display: block;
      }
      img {
        width: 50px;
        height: 100%;
      }
    }
  }
  .guan {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 30px;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    border: 1px solid #000;
    text-align: center;
    line-height: 20px;
  }
  h1 {
    font-size: 25px;
    font-weight: 550;
    margin-top: 50px;
    margin-left: 20px;
  }
}
.el-container {
  height: 100%;
  position: relative;
  background-color: rgb(252, 252, 252);
}

.el-header {
  height: 150px;
  background-color: #b3c0d1;
  color: #333;
  // text-align: center;
  // line-height: 60px;
}
.el-header {
  background-color: #ec4141ea;
}
.xian {
  height: 2px;
  width: 100vw;
  background-color: rgb(224, 223, 223);
  position: fixed;
  z-index: 96;
  bottom: 80px;
}
.el-footer {
  position: fixed;
  z-index: 94;
  width: 100%;
  bottom: 0px;
  height: 80px !important;
  // height: 150px;
  min-width: 800px !important;
  background-color: #b3c0d1;
  color: #333;
  // text-align: center;
  // line-height: 60px;
  background-color: rgb(252, 252, 252);
  // border-top: 2px solid rgb(224, 223, 223);
}
.el-aside {
  background-color: rgb(252, 252, 252);
  color: #333;
  border-right: 2px solid #e0dfdf;
  // text-align: center;
  // line-height: 200px

  // border: 1px solid #000;
}
.el-main {
  background-color: rgb(252, 252, 252);
  color: #333;
  // text-align: center;
  // line-height: 160px;
  min-width: 800px !important;
  padding: 0px !important;
  // margin-top: 20px;
  // margin-right: 30px;
  // margin-left: 20px;
}

body > .el-container {
  margin-bottom: 40px;
  margin: 0 !important;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  // line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  // line-height: 320px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-width: 665px;
  color: #2c3e50;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
html,body { 
  
   scroll-behavior: smooth;  
  }



  // 条纹

  .el-table .warning-row {
background-color: rgba(218, 218, 218, 0.363);
}

.el-table .success-row {
  background-color: #fcfcfc;
}

</style>
